import React, { Component } from 'react';
import { View, Image, Icon } from '@tarojs/components';
import { AtCheckbox, AtListItem, AtList, AtNavBar, AtLoadMore } from "taro-ui";
import './myapprove.less';
import Taro from '@tarojs/taro';
import config from '../../config.json';
import { Picker } from 'antd-mobile';
import { ApproveItem } from '../../modal/component';


type myapproveState = {
    datas: any[],
    pickerVisible: boolean,
    pickerSelect: string,
    moreState: "more" | "loading" | "noMore"
}

enum pickerEnum {
    "今日起" = "today",
    "一周内" = "week",
    "历史所有" = "history"
}

export default class Index extends Component<any, myapproveState> {
    constructor(props) {
        super(props);
        this.state = {
            datas: [],
            pickerVisible: false,
            pickerSelect: "今日起",
            moreState: "more"
        }
    }

    async load(time: string, offset: number) {
        if(offset === 0) {
            this.setState({datas: []})
        }
        let res = await Taro.request({
            url: config.domainName + "/agreed/myapprove/query",
            data: {time: pickerEnum[time], offset: offset},
            header: {
                "token": Taro.getStorageSync("token")
            }
        });

        if (!res.data.code) {
            
            res.data.data.sort((a: any, b: any) => {
                return a.start_time - b.start_time;
            });
            if(res.data.data.length < 8) {
                this.setState({
                    moreState: "noMore",
                });
            } else {
                this.setState({
                    moreState: "more",
                });
            }
            this.setState((state) => {
                let temp = state;
                res.data.data.forEach((item) => {
                    temp.datas.push(item);
                });
                return temp;
            })
        } else {
            Taro.showToast({title: "加载失败"})
            this.setState({
                moreState: "more",
            });
        }
    }

    componentWillMount() {
        this.load(this.state.pickerSelect, 0);
    }

    componentDidMount() { }

    componentWillUnmount() { }

    componentDidShow() {
    }

    componentDidHide() { }

    render() {
        return (
            <View style={{marginBottom: "2rem"}}>
                <AtNavBar
                    onClickLeftIcon={() => { Taro.navigateBack() }}
                    color='#000'
                    title='我的申请'
                    leftIconType="chevron-left"
                />
                <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: "20px" }}>
                    <View className="module-title">申请列表</View>
                    <View
                        className="primary-color-text-s"
                        onClick={() => { this.setState({ pickerVisible: true }) }}
                        style={{
                            marginRight: "0.6rem",
                            fontSize: "0.6rem",
                            cursor: "pointer"
                        }}
                    >
                        {this.state.pickerSelect} ▼
                    </View>
                    <Picker
                        columns={[["今日起", "一周内", "历史所有"]]}
                        visible={this.state.pickerVisible}
                        onClose={() => {
                            this.setState({ pickerVisible: false });
                        }}
                        value={[this.state.pickerSelect]}
                        onConfirm={(value) => {
                            this.setState({ pickerSelect: value[0] });
                            this.load(value[0], 0);
                        }}
                    />
                </View>
                {(() => {
                    return this.state.datas.map((item) => {
                        return <ApproveItem
                        data={item}
                    />
                    })
                })()}
                <AtLoadMore onClick={() => {
                    this.setState({
                        moreState: "loading"
                    })
                    this.load(this.state.pickerSelect, this.state.datas.length);
                }} status={this.state.moreState} />
            </View>
        )
    }
}
